<template>
  <div class="destinations-page">
    <!-- Hero Section -->
    <section class="hero-section bg-primary text-white py-5 animate__animated animate__fadeIn">
      <div class="container py-5">
        <div class="row align-items-center">
          <div class="col-lg-8 mx-auto text-center">
            <h1 class="display-4 fw-bold mb-4 animate__animated animate__fadeInDown">
              探索全球精彩目的地
            </h1>
            <p class="lead mb-4 animate__animated animate__fadeIn animate__delay-1s">
              从城市风光到自然奇观，发现世界各地的独特魅力
            </p>
            <div class="d-flex justify-content-center gap-3 animate__animated animate__fadeInUp animate__delay-2s">
              <button class="btn btn-warning btn-lg px-4 py-2" @click="scrollToDestinations">
                <i class="bi bi-compass me-2"></i>开始探索
              </button>
              <button class="btn btn-outline-light btn-lg px-4 py-2">
                <i class="bi bi-filter-circle me-2"></i>筛选条件
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Search & Filter Section -->
    <section class="py-4 bg-light sticky-top animate__animated animate__fadeInDown">
      <div class="container">
        <div class="card border-0 shadow">
          <div class="card-body p-4">
            <form class="row g-3">
              <div class="col-md-3">
                <label class="form-label">目的地</label>
                <input
                  type="text"
                  class="form-control"
                  placeholder="搜索目的地..."
                  v-model="searchQuery"
                />
              </div>
              <div class="col-md-2">
                <label class="form-label">类型</label>
                <select class="form-select" v-model="selectedType">
                  <option value="">全部类型</option>
                  <option value="beach">海滩</option>
                  <option value="mountain">山区</option>
                  <option value="city">城市</option>
                  <option value="cultural">文化</option>
                </select>
              </div>
              <div class="col-md-2">
                <label class="form-label">预算</label>
                <select class="form-select" v-model="selectedBudget">
                  <option value="">任何预算</option>
                  <option value="low">经济型 (￥5000以下)</option>
                  <option value="medium">中档 (￥5000-15000)</option>
                  <option value="high">豪华 (￥15000以上)</option>
                </select>
              </div>
              <div class="col-md-2">
                <label class="form-label">评分</label>
                <select class="form-select" v-model="selectedRating">
                  <option value="">任何评分</option>
                  <option value="4.5">4.5星以上</option>
                  <option value="4.0">4.0星以上</option>
                  <option value="3.5">3.5星以上</option>
                </select>
              </div>
              <div class="col-md-3 d-flex align-items-end">
                <button class="btn btn-primary w-100 py-2" @click.prevent="applyFilters">
                  <i class="bi bi-search me-2"></i>搜索
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Destinations Grid -->
    <section class="py-5" ref="destinationsSection">
      <div class="container">
        <div class="row mb-4 animate__animated animate__fadeIn">
          <div class="col-md-6">
            <h2 class="fw-bold">热门旅游目的地</h2>
            <p class="text-muted">发现全球最受欢迎的旅游胜地</p>
          </div>
          <div class="col-md-6 text-md-end">
            <div class="btn-group" role="group">
              <button 
                type="button" 
                class="btn"
                :class="viewMode === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
                @click="viewMode = 'grid'"
              >
                <i class="bi bi-grid"></i>
              </button>
              <button 
                type="button" 
                class="btn"
                :class="viewMode === 'list' ? 'btn-primary' : 'btn-outline-primary'"
                @click="viewMode = 'list'"
              >
                <i class="bi bi-list"></i>
              </button>
            </div>
          </div>
        </div>

        <div v-if="viewMode === 'grid'" class="row">
          <div
            v-for="(destination, index) in filteredDestinations"
            :key="index"
            class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp"
            :style="{ 'animation-delay': (index * 0.1) + 's' }"
          >
            <div class="card h-100 border-0 shadow-sm destination-card">
              <div class="position-relative overflow-hidden rounded-top">
                <div class="destination-image-placeholder"></div>
                <span 
                  class="position-absolute top-0 start-0 m-3 badge" 
                  :class="getBadgeClass(destination.type)"
                >
                  {{ getDestinationTypeName(destination.type) }}
                </span>
                <span class="position-absolute top-0 end-0 m-3 badge bg-warning text-dark">
                  <i class="bi bi-star-fill"></i> {{ destination.rating }}
                </span>
              </div>
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                  <h5 class="card-title">{{ destination.name }}</h5>
                </div>
                <p class="card-text text-muted small">
                  <i class="bi bi-geo-alt me-1"></i> {{ destination.location }}
                </p>
                <p class="card-text">{{ destination.description }}</p>
                <div class="d-flex justify-content-between align-items-center mt-3">
                  <span class="fw-bold text-primary">
                    ￥{{ destination.price }}
                    <small class="text-muted text-decoration-line-through" v-if="destination.originalPrice">
                      ￥{{ destination.originalPrice }}
                    </small>
                  </span>
                  <NuxtLink
                    :to="'/destinations/' + destination.id"
                    class="btn btn-sm btn-primary"
                  >
                    查看详情
                  </NuxtLink>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="viewMode === 'list'" class="row">
          <div 
            v-for="(destination, index) in filteredDestinations" 
            :key="index" 
            class="col-12 mb-4 animate__animated animate__fadeInUp"
            :style="{ 'animation-delay': (index * 0.1) + 's' }"
          >
            <div class="card border-0 shadow-sm destination-card list-view">
              <div class="row g-0">
                <div class="col-md-4">
                  <div class="destination-image-placeholder h-100"></div>
                </div>
                <div class="col-md-8">
                  <div class="card-body h-100 d-flex flex-column">
                    <div class="d-flex justify-content-between">
                      <div>
                        <h5 class="card-title">{{ destination.name }}</h5>
                        <p class="card-text text-muted">
                          <i class="bi bi-geo-alt me-1"></i> {{ destination.location }}
                        </p>
                      </div>
                      <span 
                        class="badge align-self-start" 
                        :class="getBadgeClass(destination.type)"
                      >
                        {{ getDestinationTypeName(destination.type) }}
                      </span>
                    </div>
                    
                    <p class="card-text">{{ destination.description }}</p>
                    
                    <div class="mt-auto">
                      <div class="d-flex justify-content-between align-items-center">
                        <div>
                          <span class="fw-bold text-primary">
                            ￥{{ destination.price }}
                            <small class="text-muted text-decoration-line-through" v-if="destination.originalPrice">
                              ￥{{ destination.originalPrice }}
                            </small>
                          </span>
                          <div class="mt-1">
                            <span class="badge bg-warning text-dark">
                              <i class="bi bi-star-fill"></i> {{ destination.rating }}
                            </span>
                          </div>
                        </div>
                        <div>
                          <NuxtLink
                            :to="'/destinations/' + destination.id"
                            class="btn btn-primary"
                          >
                            查看详情
                          </NuxtLink>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Load More Button -->
        <div class="text-center mt-4 animate__animated animate__fadeInUp" v-if="filteredDestinations.length < destinations.length">
          <button class="btn btn-outline-primary btn-lg px-5" @click="loadMore">
            <i class="bi bi-arrow-clockwise me-2"></i>加载更多
          </button>
        </div>
      </div>
    </section>

    <!-- Popular Regions -->
    <section class="py-5 bg-light">
      <div class="container">
        <div class="text-center mb-5 animate__animated animate__fadeIn">
          <h2 class="fw-bold">热门地区</h2>
          <p class="text-muted">按地区探索精彩目的地</p>
        </div>

        <div class="row">
          <div
            v-for="(region, index) in regions"
            :key="index"
            class="col-lg-3 col-md-6 mb-4 animate__animated animate__fadeInUp"
            :style="{ 'animation-delay': (index * 0.1) + 's' }"
          >
            <div class="card h-100 border-0 shadow-sm text-center region-card">
              <div class="card-body py-5">
                <div class="region-icon mx-auto mb-3">
                  <i :class="region.icon + ' text-primary fs-1'"></i>
                </div>
                <h5 class="card-title">{{ region.name }}</h5>
                <p class="text-muted">{{ region.destinations }}个目的地</p>
                <NuxtLink :to="region.link" class="btn btn-outline-primary mt-2">
                  探索<i class="bi bi-arrow-right ms-2"></i>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Travel Tips -->
    <section class="py-5">
      <div class="container">
        <div class="text-center mb-5 animate__animated animate__fadeIn">
          <h2 class="fw-bold">旅行小贴士</h2>
          <p class="text-muted">为您的旅程做好准备</p>
        </div>

        <div class="row">
          <div
            v-for="(tip, index) in travelTips"
            :key="index"
            class="col-lg-4 col-md-6 mb-4 animate__animated animate__fadeInUp"
            :style="{ 'animation-delay': (index * 0.1) + 's' }"
          >
            <div class="card h-100 border-0 shadow-sm tip-card">
              <div class="card-body text-center">
                <div class="tip-icon mx-auto mb-3">
                  <i :class="tip.icon + ' text-primary fs-1'"></i>
                </div>
                <h5 class="card-title">{{ tip.title }}</h5>
                <p class="card-text">{{ tip.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 响应式数据
const viewMode = ref('grid')
const searchQuery = ref('')
const selectedType = ref('')
const selectedBudget = ref('')
const selectedRating = ref('')
const displayedCount = ref(6)

// 目的地数据
const destinations = ref([
  {
    id: 1,
    name: "巴黎浪漫之旅",
    location: "法国",
    rating: 4.8,
    price: 8999,
    originalPrice: 10999,
    type: "city",
    description: "体验浪漫之都的魅力，埃菲尔铁塔、卢浮宫等著名景点等您探索。",
    region: "europe"
  },
  {
    id: 2,
    name: "东京文化体验",
    location: "日本",
    rating: 4.7,
    price: 7899,
    originalPrice: null,
    type: "cultural",
    description: "感受传统与现代的完美融合，品尝正宗寿司和拉面。",
    region: "asia"
  },
  {
    id: 3,
    name: "巴厘岛度假",
    location: "印度尼西亚",
    rating: 4.9,
    price: 6999,
    originalPrice: 8999,
    type: "beach",
    description: "享受热带海滩、豪华度假村和独特的巴厘岛文化。",
    region: "asia"
  },
  {
    id: 4,
    name: "瑞士阿尔卑斯山",
    location: "瑞士",
    rating: 4.9,
    price: 12800,
    originalPrice: null,
    type: "mountain",
    description: "壮丽的山脉景色，体验滑雪、徒步等户外活动。",
    region: "europe"
  },
  {
    id: 5,
    name: "纽约都市风情",
    location: "美国",
    rating: 4.6,
    price: 12800,
    originalPrice: 14800,
    type: "city",
    description: "感受大苹果的城市脉搏，时代广场、自由女神像等不容错过。",
    region: "north-america"
  },
  {
    id: 6,
    name: "马尔代夫蜜月",
    location: "马尔代夫",
    rating: 4.9,
    price: 19999,
    originalPrice: null,
    type: "beach",
    description: "奢华的水上别墅，清澈的海水和白色沙滩，完美的度假胜地。",
    region: "asia"
  },
  {
    id: 7,
    name: "罗马历史之旅",
    location: "意大利",
    rating: 4.7,
    price: 9999,
    originalPrice: 11999,
    type: "cultural",
    description: "探索古罗马遗迹，感受千年历史文化的厚重底蕴。",
    region: "europe"
  },
  {
    id: 8,
    name: "夏威夷火山探险",
    location: "美国夏威夷",
    rating: 4.8,
    price: 14999,
    originalPrice: null,
    type: "mountain",
    description: "观赏活火山奇观，体验独特的地质景观和热带风情。",
    region: "north-america"
  },
  {
    id: 9,
    name: "悉尼歌剧院",
    location: "澳大利亚",
    rating: 4.6,
    price: 13999,
    originalPrice: 15999,
    type: "cultural",
    description: "标志性建筑悉尼歌剧院，感受澳洲独特的文化艺术氛围。",
    region: "oceania"
  }
])

// 地区数据
const regions = ref([
  {
    name: "亚洲",
    icon: "bi bi-globe-asia-australia",
    destinations: 24,
    link: "/destinations?region=asia"
  },
  {
    name: "欧洲",
    icon: "bi bi-globe-europe-africa",
    destinations: 32,
    link: "/destinations?region=europe"
  },
  {
    name: "北美洲",
    icon: "bi bi-globe-americas",
    destinations: 18,
    link: "/destinations?region=north-america"
  },
  {
    name: "大洋洲",
    icon: "bi bi-globe-asia-australia",
    destinations: 12,
    link: "/destinations?region=oceania"
  }
])

// 旅行小贴士数据
const travelTips = ref([
  {
    title: "签证准备",
    icon: "bi bi-file-earmark-text",
    description: "提前了解目的地签证要求，准备好所需材料"
  },
  {
    title: "行李打包",
    icon: "bi bi-backpack",
    description: "根据不同目的地气候和文化准备合适的衣物"
  },
  {
    title: "货币兑换",
    icon: "bi bi-currency-exchange",
    description: "提前兑换当地货币或准备国际信用卡"
  },
  {
    title: "保险购买",
    icon: "bi bi-shield-check",
    description: "购买适合的旅行保险，确保旅途安全"
  },
  {
    title: "健康防护",
    icon: "bi bi-bandaid",
    description: "了解疫苗接种要求，准备常用药品"
  },
  {
    title: "文化礼仪",
    icon: "bi bi-book",
    description: "学习基本当地语言和文化习俗，尊重当地风俗"
  }
])

// 计算属性：过滤后的目的地
const filteredDestinations = computed(() => {
  let result = [...destinations.value]
  
  // 搜索过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(d => 
      d.name.toLowerCase().includes(query) || 
      d.location.toLowerCase().includes(query) ||
      d.description.toLowerCase().includes(query)
    )
  }
  
  // 类型过滤
  if (selectedType.value) {
    result = result.filter(d => d.type === selectedType.value)
  }
  
  // 预算过滤
  if (selectedBudget.value) {
    switch(selectedBudget.value) {
      case 'low':
        result = result.filter(d => d.price < 5000)
        break
      case 'medium':
        result = result.filter(d => d.price >= 5000 && d.price <= 15000)
        break
      case 'high':
        result = result.filter(d => d.price > 15000)
        break
    }
  }
  
  // 评分过滤
  if (selectedRating.value) {
    result = result.filter(d => d.rating >= parseFloat(selectedRating.value))
  }
  
  // 限制显示数量
  return result.slice(0, displayedCount.value)
})

// 方法
const scrollToDestinations = () => {
  const element = document.querySelector('.destinations-page section:nth-child(3)')
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const applyFilters = () => {
  displayedCount.value = 6
}

const loadMore = () => {
  displayedCount.value += 3
}

const getBadgeClass = (type) => {
  const classes = {
    beach: 'bg-info',
    mountain: 'bg-success',
    city: 'bg-warning text-dark',
    cultural: 'bg-secondary'
  }
  return classes[type] || 'bg-primary'
}

const getDestinationTypeName = (type) => {
  const names = {
    beach: '海滩',
    mountain: '山区',
    city: '城市',
    cultural: '文化'
  }
  return names[type] || '其他'
}

// 页面元数据
useHead({
  title: '目的地 - TravelExplorer',
  meta: [
    { name: 'description', content: '发现全球热门旅游目的地，获取详细旅游攻略和优惠信息' }
  ]
})
</script>

<style scoped>
.hero-section {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="1" fill="white" opacity="0.3"/><circle cx="80" cy="70" r="1" fill="white" opacity="0.3"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.3"/><circle cx="10" cy="90" r="1" fill="white" opacity="0.3"/><circle cx="90" cy="20" r="1" fill="white" opacity="0.3"/></svg>') repeat;
  animation: stars 30s linear infinite;
}

@keyframes stars {
  from { transform: translateY(0); }
  to { transform: translateY(-100px); }
}

.destination-card {
  transition: all 0.3s ease;
  overflow: hidden;
}

.destination-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

.destination-image-placeholder {
  height: 200px;
  background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
  position: relative;
  overflow: hidden;
}

.destination-image-placeholder::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

.list-view .destination-image-placeholder {
  height: 100%;
  min-height: 250px;
}

.region-card, .tip-card {
  transition: all 0.3s ease;
}

.region-card:hover, .tip-card:hover {
  transform: translateY(-5px);
}

.region-icon, .tip-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

.floating-element {
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.sticky-top {
  top: 70px;
  z-index: 1020;
}
</style>